// 默认代码
const defaultCode = `<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            background-color: #f9f9f9;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #2c3e50;
            border-bottom: 2px solid #3498db;
            padding-bottom: 10px;
        }
        .chart {
            width: 100%;
            height: 300px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>销售数据图表</h1>
        <p>这是一个示例图表，展示了不同产品的销售数据。</p>
        <div id="chart" class="chart"></div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"><\/script>
    <script>
        // 初始化ECharts实例
        var chartDom = document.getElementById('chart');
        var myChart = echarts.init(chartDom);
        
        // 配置项和数据
        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['产品A', '产品B', '产品C']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '产品A',
                    type: 'bar',
                    data: [120, 132, 101, 134, 90, 230],
                    itemStyle: {
                        color: '#5470c6'
                    }
                },
                {
                    name: '产品B',
                    type: 'bar',
                    data: [150, 182, 191, 234, 290, 330],
                    itemStyle: {
                        color: '#91cc75'
                    }
                },
                {
                    name: '产品C',
                    type: 'bar',
                    data: [320, 332, 301, 334, 390, 330],
                    itemStyle: {
                        color: '#fac858'
                    }
                }
            ]
        };
        
        // 使用配置项和数据显示图表
        myChart.setOption(option);
        
        // 响应窗口大小变化
        window.addEventListener('resize', function() {
            myChart.resize();
        });
    <\/script>
</body>
</html>`;

        require.config({ paths: { 'vs': './static/js/monaco-editor-0.54.0/min/vs' } });
        // 初始化Monaco Editor
        let editor;
        require(['vs/editor/editor.main'], function() {
            editor = monaco.editor.create(document.getElementById('editor'), {
                value: defaultCode,
                language: 'html',
                theme: 'vs',
                automaticLayout: true,
                minimap: {
                    enabled: true
                }
            });
            
            // 初始运行一次
            runCode();
            
            // 添加内容变化监听器，实现实时预览
            editor.onDidChangeModelContent(debounce(runCode, 1000));
        });

        // 防抖函数
        function debounce(func, wait) {
            let timeout;
            return function() {
                clearTimeout(timeout);
                timeout = setTimeout(func, wait);
            };
        }

        // 运行代码
        function runCode() {
            const code = editor.getValue();
            const previewFrame = document.getElementById('preview');
            
            // 清空预览区域
            previewFrame.innerHTML = '';
            
            // 创建iframe来安全地运行代码
            const iframe = document.createElement('iframe');
            iframe.style.width = '100%';
            iframe.style.height = '100%';
            iframe.style.border = 'none';
            
            previewFrame.appendChild(iframe);
            
            const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
            iframeDoc.open();
            iframeDoc.write(code);
            iframeDoc.close();
        }

        // 重置代码
        document.getElementById('reset-btn').addEventListener('click', function() {
            if (confirm('确定要重置代码吗？所有未保存的更改将丢失。')) {
                editor.setValue(defaultCode);
            }
        });

        // 保存代码
        document.getElementById('save-btn').addEventListener('click', function() {
            const code = editor.getValue();
            const blob = new Blob([code], { type: 'text/html' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = 'code.html';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
            
            alert('代码已保存为HTML文件');
        });

        // 运行按钮
        document.getElementById('run-btn').addEventListener('click', runCode);

        // 主题切换
        document.getElementById('theme-select').addEventListener('change', function() {
            const theme = this.value;
            monaco.editor.setTheme(theme);
        });

        // 全屏预览
        document.getElementById('fullscreen-btn').addEventListener('click', function() {
            const previewContainer = document.getElementById('preview');
            if (previewContainer.requestFullscreen) {
                previewContainer.requestFullscreen();
            } else if (previewContainer.webkitRequestFullscreen) {
                previewContainer.webkitRequestFullscreen();
            } else if (previewContainer.msRequestFullscreen) {
                previewContainer.msRequestFullscreen();
            }
        });